.tags-btn {
    height: 32px;
    display: flex;
    align-items: center;
    gap: 10px;

    .tags-num {
        color: #ff6b00;
    }
}

.tags-list {
    margin-top: 10px;

    .el-tag {
        margin-right: 8px;
        margin-bottom: 8px;

        :deep(.el-tag__content) {
            display: flex;
            align-items: center;

            .el-image {
                width: 20px;
                height: 20px;
                border-radius: 50%;
                margin-right: 6px;
            }

            .tag-name {
                line-height: 1;
            }
        }
    }
}

.tags-group {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 8px;

    .group-box {
        flex: 1;
        height: 56px;
        overflow: hidden;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;

        .group {
            min-width: 200px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px;
            box-sizing: border-box;
            background-color: #f5f5f5;
            border-radius: 4px;

            .group-detail {
                flex: 1;
                width: 0;
                display: flex;
                align-items: center;

                .el-image {
                    width: 40px;
                    height: 40px;
                    margin-right: 8px;
                }

                .group-name {
                    font-size: 12px;
                    color: #333;
                    flex: 1;
                    overflow: hidden;

                    div {
                        word-break: break-all;
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-line-clamp: 2;
                        -webkit-box-orient: vertical;
                    }
                }
            }

            .del {
                color: #fff;
                background-color: #ddd;
                border-radius: 50%;
                width: 20px;
                height: 20px;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-left: 10px;

                &:hover {
                    cursor: pointer;
                    background-color: #e6e6e6;
                }
            }
        }
    }

    .group-more {
        width: 36px;
        line-height: 1;
        color: #666;
        background-color: #f5f5f5;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;

        &:hover {
            cursor: pointer;
            background-color: #eee;
        }
    }

    .disabled {
        &:hover {
            cursor: not-allowed;
            background-color: #f5f5f5;
        }

        cursor: not-allowed;
    }
}
